<template>
  <div class="warpper-box">
    <a-form layout="inline" style="padding-left: 34px;">
      <a-form-item label="年份">
        <date-picker style="width: 240px;" v-model="params.year" type="year" placeholder="选择年" value-format="yyyy" size="small"></date-picker>
      </a-form-item>
      <a-form-item label="平台公司">
        <a-select v-model="params.parkId" style="width: 240px;" placeholder="请选择平台公司">
          <a-select-option v-for="item in companyList" :key="item.parkId">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="合作类型">
        <a-select v-model="params.bizType" style="width: 240px;" placeholder="请选择合作类型">
          <a-select-option v-for="item in bizTypeList" :key="item.bizType">
            {{ item.bizTypeName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type='primary' @click="onSearch">查询</a-button>
        <a-button type='primary' @click="onReset">重置</a-button>
        <a-button type='primary' @click="downloadOrder">导出明细</a-button>
      </a-form-item>
    </a-form>
    <!-- 统计数据 -->
    <a-row type="flex" justify="space-around" style="margin-top: 20px;">
      <a-col :span="5">
        <a-card>
          <a-statistic title="客户" :value="statisticsInfo.enterpriseNum" :value-style="{ color: '#3f8600' }">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="5">
        <a-card>
          <a-statistic title="渠道" :value="statisticsInfo.channelNum" :value-style="{ color: '#3f8600' }">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="5">
        <a-card>
          <a-statistic title="落地服务商" :value="statisticsInfo.localServiceNum" :value-style="{ color: '#3f8600' }">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="5">
        <a-card>
          <a-statistic title="合作人数" :value="statisticsInfo.cooperationNum" :value-style="{ color: '#3f8600' }">
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
    <a-row type="flex" justify="space-around" style="margin-top: 20px;">
      <a-col :span="5">
        <a-card>
          <a-statistic title="结算金额" :value="statisticsInfo.settleAmount" :value-style="{ color: '#cf1322' }" prefix="￥">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="5">
        <a-card>
          <a-statistic title="服务费" :value="statisticsInfo.serviceAmount" :value-style="{ color: '#cf1322' }" prefix="￥">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="5">
        <a-card>
          <a-statistic title="毛利润" :value="statisticsInfo.grossProfitAmount" :value-style="{ color: '#cf1322', }"
            prefix="￥">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="5">
        <a-card>
          <a-statistic title="应收款" :value="statisticsInfo.receivablesAmount" :value-style="{ color: '#cf1322' }"
            prefix="￥">
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  yearComprehensive,
  exportYearExcel
} from "@/api/human/report"
import {
  sysListBaseInfo
} from '@/api/manage/base'
import {
  listEnterpriseBizType
} from "@/api/human/enterprise"
import { DatePicker } from 'element-ui';
var nowDate = new Date(); // 当前时间
export default {
  name: "compositeEcharts",
  components: {
    DatePicker
  },
  data() {
    return {
      params: {
        year: nowDate.getFullYear().toString(),
        parkId: undefined,
        bizType: undefined
      },
      companyList: [], // 平台公司列表
      bizTypeList: [], // 合作类型列表

      statisticsInfo: {}, // 统计数据
    };
  },
  activated() {
    this.getData();
    this.getSysListBaseInfo();
    this.getBizTypeList();
  },
  methods: {
    // 获取月度综合统计数据
    async getData() {
      const { code, data } = await yearComprehensive(this.params);
      if (code === '1') {
        this.statisticsInfo = data;
      }
    },
    // 获取所有平台基础信息
    async getSysListBaseInfo() {
      const {
        code,
        data
      } = await sysListBaseInfo();
      if (code == "1") {
        this.companyList = data;
      }
    },
    // 获取所有合作类型信息
    async getBizTypeList() {
      const {
        code,
        data
      } = await listEnterpriseBizType();
      if (code == "1") {
        this.bizTypeList = data;
      }
    },
    // 导出明细
    downloadOrder() {
      exportYearExcel({ 
        year: this.params.year,
      }).then(res => {
        const blob = new Blob([res]);
        const fileName = '年度综合统计明细.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 搜索
    onSearch() {
      this.getData();
    },
    // 重置
    onReset() {
      this.params.year = nowDate.getFullYear().toString();
      this.params.parkId = undefined;
      this.params.bizType = undefined;
      this.getData();
    }
  }
};
</script>

<style lang="less" scoped></style>
